
<template>
    <el-carousel class="ge-homepage-carousel" indicator-position="none"
        :arrow="carouselItem.length > 1 ? 'hover' : 'never'">
        <el-carousel-item v-for="item in carouselItem" :key="item.id">
            <div style="width: 100%;height: 100%;">
                <el-image fit="cover" :src="item.img" style="width: 100%;height: 100%;"></el-image>
                <div class="ge-homepage-hero-v2__text-content-wrapper active-text-content active-text-content-animate">
                    <div class="ge-homepage-hero-v2__text-content">
                        <div class="ge-homepage-hero-v2__text-content-animate">
                            <div class="ge-homepage-hero-v2__text-content__text-wrapper">
                                <h2 class="ge-homepage-hero-v2__text-content__heading title-m">Every patient has a story to
                                    tell</h2>
                                <p class="ge-homepage-hero-v2__text-content__bodyCopy ptags-small">We dedicate our work to
                                    the billions of patients and healthcare workers we serve around the world every year.
                                </p>
                                <p class="ge-homepage-hero-v2__text-content__cta-link"><a
                                        class="ge-homepage-hero-v2__text-content__cta-link-anchor" target=""
                                        data-analytics-tracking-event="link_click" data-analytics-link-type="Hero Banner"
                                        data-analytics-link-name="Explore the art of care"
                                        data-analytics-link-title="Every patient has a story to tell">Explore the art of
                                        care<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                                            width="24" height="24" viewBox="0 0 24 24">
                                            <g id="Caret_right_-_24" data-name="Caret right - 24">
                                                <path
                                                    d="M8,23a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L16.59,12,7.29,2.71A1,1,0,1,1,8.71,1.29l10,10a1,1,0,0,1,0,1.42l-10,10A1,1,0,0,1,8,23Z">
                                                </path>
                                            </g>
                                        </svg>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-carousel-item>
    </el-carousel>
    <div class="ge-homepage-hero-v2__text-content-wrapper-content hidden-xl-only">
        <div class="mdc-layout-grid">
            <el-row>
                <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                    <div class="title-m">
                        Every patient has a story to tell
                    </div>
                    <p class="ptags-small">
                        We dedicate our work to the billions of patients and healthcare workers we serve around the world
                        every
                        year.
                    </p>
                    <p class="cta-link">
                        <a class="cta-link-anchor">
                            Explore the art of care
                            <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                viewBox="0 0 24 24">
                                <g id="Caret_right_-_24" data-name="Caret right - 24">
                                    <path
                                        d="M8,23a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L16.59,12,7.29,2.71A1,1,0,1,1,8.71,1.29l10,10a1,1,0,0,1,0,1.42l-10,10A1,1,0,0,1,8,23Z">
                                    </path>
                                </g>
                            </svg>
                        </a>
                    </p>
                </el-col>
            </el-row>
        </div>
    </div>
    <personalization></personalization>
    <product-family></product-family>
    <related-content></related-content>
    <generic-content></generic-content>
    <what-wedo></what-wedo>
    <news-curve></news-curve>
    <ge-contact></ge-contact>
    <veeva-component></veeva-component>
</template>
<script setup>
import productFamily from './Home/productFamily.vue'
import relatedContent from './Home/relatedContent.vue'
import genericContent from './Home/genericContent.vue'
import whatWedo from './Home/whatWedo.vue'
import newsCurve from './Home/newsCurve.vue'
import personalization from './Home/personalization.vue'
import geContact from './Home/geContact.vue'
import veevaComponent from './Home/veevaComponent.vue'

onMounted(() => { })
let carouselItem = ref([
    { id: '4564', img: new URL(`@/assets/home/home_banner1.avif`, import.meta.url).href }
])
</script>

<style lang="scss" scoped>
.ge-homepage-carousel {
    height: 708px;
}

:deep(.el-carousel__container) {
    height: 100%;
}

.el-carousel-item {
    position: relative;
}

.ge-homepage-hero-v2__text-content-wrapper {
    position: absolute;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    left: 432px;
    opacity: 0;
    z-index: 10000;
}

.ge-homepage-hero-v2__text-content {
    animation: cardContentAnimation .5s ease-in-out forwards;
}

@keyframes cardContentAnimation {
    0% {
        height: 0%;
    }

    to {
        height: 372px
    }
}

.ge-homepage-hero-v2__text-content {
    width: 474px;
    padding: 48px;
    border-radius: 16px;
    background: #fff;
}

.ge-homepage-hero-v2__text-content__heading {
    margin-bottom: 16px;
    color: #222222;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -.75px;
    font-weight: 400;
}

.ge-homepage-hero-v2__text-content__bodyCopy {
    letter-spacing: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: #5b5b67;
}

.ge-homepage-hero-v2__text-content__cta-link {
    margin-top: 32px;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 28px;
    letter-spacing: 0;
    font-weight: 400;
}

.ge-homepage-hero-v2__text-content-wrapper-content {
    background: #f4f1f8;
    height: auto;
    padding: 4px 0 12px;

    .title-m {
        margin-bottom: 16px;
        color: #222222;
    }

    .cta-link {
        margin-top: 32px;
        margin-bottom: 0;

        a {
            color: var(--interaction);
            fill: var(--interaction);
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;

            svg {
                width: 16px;
                height: 16px;
                margin-left: 8px;
                vertical-align: middle;
            }
        }
    }
}

@media (min-width: 320px) {
    .el-carousel {
        aspect-ratio: 1/1;
        width: 100%;
    }
}

@media (min-width: 600px) {
    .ge-homepage-carousel {
        height: 304px;
    }
}

@media (min-width: 960px) {

    .ge-homepage-carousel {
        height: 450px;
    }

    .ge-homepage-hero-v2__text-content__heading {
        font-size: 2.6rem;
        line-height: 3rem;
        letter-spacing: -1.25px;
    }

    .ge-homepage-hero-v2__text-content__bodyCopy {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .ge-homepage-hero-v2__text-content__cta-link {
        margin-top: 32px;
        margin-bottom: 0;
        font-size: 1.1rem;
        line-height: 32px;

        a {
            color: var(--interaction);
            fill: var(--interaction);
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;

            &:hover {
                text-decoration: underline;
            }

            svg {
                width: 16px;
                height: 16px;
                margin-left: 8px;
                vertical-align: middle;
            }
        }
    }

    .ge-homepage-hero-v2__text-content-wrapper-content {
        padding: 24px 0;
        display: block;
    }
}

@media (min-width: 1920px) {
    .ge-homepage-carousel {
        height: 760px;
    }

    .ge-homepage-hero-v2__text-content-wrapper.active-text-content {
        animation: textCardAnimation .5s ease-out forwards;
        animation-delay: 1.1s;
    }
}

@keyframes textCardAnimation {
    0% {
        transform: translateY(10%);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}</style>